<template>
  <div class="box">
    <div class="header-box">
      <div class="menu">{{nav.relatedPro}}</div>
    </div>
    <div class="list-box">
      <CommonGoodItem v-for="(item, index) in newList" :key="index" :item="item"/>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { TGoodsItem } from "~/components/common/type";
import { language } from "~/conf";
const { nav } = language;

let newList = ref<TGoodsItem[]>([]);
const init = async () => {
  const { data } = await useServerFetch<{ list: TGoodsItem[] }>("/app-api/product/spu/page", {
    method: "post",
    body: {
      pageNo: 1,
      pageSize: 4,
    },
  });
  newList.value = data?.list;
};

init();
</script>

<style lang="stylus" scoped>
.box{
  margin-bottom 38px
}
.header-box{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  padding-left:37px
  margin-bottom 26px
  border-bottom 1px solid #E1E1E1
  margin-top 48px
}
.menu{
  font-weight: bold;
  font-size: 16px;
  padding-bottom:18px
  margin-right 52px
}
.list-box{
  display:flex;
  justify-content flex-start
  align-items center
  padding 0 26px
  .list{
    width 231px
    cursor pointer
    .imgs{
      width 231px
      height 231px
      margin-bottom 11px
    }
    .text-box{
      .name{
        height 38px
        font-weight: bold;
        font-size: 14px;
        margin-bottom 15px
      }
      .weight{
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        margin-bottom 11px
      }
      .mb10{
        margin-bottom 10px
      }
    }
  }
}
</style>
